<template>
    <div>
        <h1>v-bind 绑定指令 绑定的是属性 v-bind:属性名='变量名'</h1>
        <a v-bind:href="url">点击去百度</a>
        <img v-bind:src="imgUrl" alt="" >
        <img v-bind:src="imgUrl2">
        <!-- <img src="../assets/8uc.png" alt=""> -->
        <!--动态样式绑定-->
        <p :id="id">v-bind的样式绑定</p>
        <button  @click="id='d2'">点击改变id的颜色</button>
</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const iconImg="../assets/8uc.png"
const url = "https://www.baidu.com"
const imgUrl ="https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png"
const imgUrl2 = imgUrl
const id = ref('d1')
</script>

<style scoped>
#d1{
    color: red;
}
#d2{
    color: blue;
}
</style>